<template>
	<div :id="model.id" class="button warp" :class="[`button-${model.data.align}`, `terminal${terminal}`]">
		<el-button
			:style="{width: `${model.data.width <= 0 ? '' : (model.data.width + model.data.widthUnit)}`}"
			:size="model.data.size" 
			:type="model.data.type"
			:plain="model.data.plain"
			:round="model.data.round"
			:circle="model.data.circle"
			:disabled="model.data.disabled"
			:native-type="model.data.nativeType"
			:color="model.data.color"
			@click="onButtonClick">
			<!-- 按钮 -->
			<i :class="model.data.icon ? model.data.icon : ''"></i>
			{{model.data.title}}
		</el-button>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	import { ElMessage, ElMessageBox } from 'element-plus';
	import { useStore } from '/@/store/index';
	export default {
		name: 'button-basics',
		props: {
			terminal: {
				type: Number,
				default: 1
			},
			model: {
				type: Object
			}
		},
		setup(props) {
			const store = useStore();
			const state = reactive({
				terminal: props.terminal,
				model: props.model,
			});
			state.componentsFormData = computed(() => store.state.decorator.componentsFormData);
			
			const onButtonClick = () => {
				switch (state.model.data.eventType){
					case 'submit':
						ElMessage({
							message: JSON.stringify(state.componentsFormData),
							type: 'success',
						});
						break;
					case 'reset':
						if(state.componentsFormData){
							for(var key in state.componentsFormData) {
								state.componentsFormData[key] = undefined;
							}
						}
						break;
					case 'link':
						window.open('https://www.baidu.com');
						break;
					case 'dialog':
						ElMessageBox.alert('弹窗提示' + JSON.stringify(state.componentsFormData), '提示', {
							confirmButtonText: '确认',
							callback: () => {
								
							}
						});
						break;
					case 'message':
						ElMessage({
							message: '消息提示' + JSON.stringify(state.componentsFormData),
							type: 'warning',
						});
						break;
					default:
						break;
				}
			}
			
			return {
				onButtonClick,
				...toRefs(state),
			};
		}
	}
</script>

<style lang="scss" scoped>
	.button {
		position: relative;
		
		i{
			margin: 0;
		}
		
		&.button-left {
			text-align: left;
		}

		&.button-center {
			text-align: center;
		}

		&.button-right {
			text-align: right;
		}
	}
</style>
